<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
        1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
        2.为什么需要这个关系？
            让组件实例对象（vc）可以访问到 Vue原型 上的属性、方法
    -->
    <div id="root"></div>
    <script type="text/javascript">
      Vue.config.productionTip = false;

      const school = Vue.extend({
        name: "school",
        template: `
           <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
           </div>
           `,
        data() {
          return {
            schoolName: "尚硅谷",
            address: "北京",
          };
        },
      });

      const vm = new Vue({
        el: "#root",
        data: {},
      });
      console.log("school.prototype.__proto__ 是否等于 Vue.prototype：",school.prototype.__proto__ === Vue.prototype);

      // 定义一个构造函数
      function Demo() {
        this.a = 1;
        this.b = 2;
      }
      // 创建一个 Demo 实例对象
      const d = new Demo();

      console.log("Demo.prototype：", Demo.prototype); // 显式原型属性
      console.log("d.__proto__：", d.__proto__); // 隐式原型属性

      console.log("Demo.prototype 是否等于 d.__proto__：", Demo.prototype === d.__proto__);

      // 程序员通过显式原型属性操作原型对象，追加一个x属性
      // d.__proto__.x 等效于 d.x
      // 此处不是说 d实例对象身上有 x属性，而是它可以顺着 隐式原型链 查找
      Demo.prototype.x = 69;
      console.log("我们Demo.prototype.x = 69，给构造函数追加了一个x属性，现在d.__proto__身上也有该属性x=", d.__proto__.x);
    </script>
  </body>
</html>
